<template>
    课程状态
    <el-switch :loading="courseStatusLoading" v-model="courseStatus"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;margin: 0 10px 0 5px" :active-value=1
        :inactive-value=0 @change="searchCourse" />
    课程标签
    <el-tree-select v-model="selectCourseTags" :props="defaultProps" @change="searchCourseName" :data="courseTagList"
        multiple collapse-tags collapse-tags-tooltip style="margin:0 5px" />
    课程名称
    <el-input v-model="searchCourseName" class="w-50 m-2" placeholder="请输入课程名称" style="width:250px;margin: 0 5px" />
    <el-button icon="Search" type="primary" @click="searchCourse" :loading="searchButtonLoading" style="margin: 0 5px">搜索</el-button>
    <el-button v-loading="createCourseLoading" type="primary" auto-insert-space @click="newCourse = true"
        style="margin: 0 5px">添加课程
    </el-button>
    <el-table v-loading="listLoading" :data="courseList" style="width: 100%; margin: 20px 0px"
        :row-key="courseList.courseId" :border="true" default-expand-all :stripe="true" :highlight-current-row="true"
        empty-text="好像没有数据哎" :scrollbar-always-on="true">

        <el-table-column type="index" width="60" label="编号" />
        <el-table-column prop="courseName" label="课程名称" />
        <el-table-column prop="courseName" label="课程封面">
            <template #default="scope">
                <el-avatar shape="square" :size="50" fit="cover"
                    :src="scope.row.courseCoverPath == 'default' ? './logo/logo.png' : 'http://localhost:80/getFile' + scope.row.courseCoverPath" />
            </template>
        </el-table-column>
        <el-table-column prop="courseCreateDate" :formatter="formater" label="创建时间" />
        <el-table-column prop="courseCreateUserId" label="用户id" />
        <el-table-column prop="courseVideoCount" label="视频数量" />
        <el-table-column prop="coursePrice" label="课程价格" />
        <el-table-column prop="courseDescription" label="课程描述" />
        <el-table-column prop="courseName" label="课程状态">
            <template #default="scope">
                <el-switch v-model="scope.row.courseStatus"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value=1
                    :inactive-value=0 :before-change="beforeChange" @change="updateCourseStatus(scope.row.courseStatus, scope.row.courseId)" />
            </template>
        </el-table-column>


        <el-table-column  align="center" label="操作" fixed="right">
            <template #default="scope">
                <el-button  type="primary" @click="detail(scope.row.courseId)">详情
                </el-button>
                <el-popconfirm title="确认是否删除?" @confirm="deleteCourse(scope.row.courseId)" confirmButtonText="确认"
                    cancelButtonText="取消">
                    <template #reference>
                        <el-button type="danger" >删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" v-model="page.currentPage" :page-count="page.pageCount"
        :page-size="page.pageSize" @current-change="currnetChange" />

    <el-dialog v-model="newCourse" @close="end" title="添 加 课 程">
        <create-course :courseTagList="courseTagList"></create-course>
    </el-dialog>
    <el-dialog v-model="courseDetail" @close="end" title="详 细 信 息">
        <coruse-detail :courseTagList="courseTagList" :courseId="courseDetailId"></coruse-detail>
    </el-dialog>
</template>

<script>
import {  ref } from 'vue'
import CreateCourse from './createCourse.vue';
import courseDetail from './coruseDetail.vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';

export default {
    name: 'courseList',
    components: { CreateCourse, courseDetail },
    data() {
        return {
            courseList: [{ courseId: 1, courseName: '测试1', courseCreateDate: new Date(), courseCreateUsCreateCourseerId: 1, courseDescription: '描述', courseCoverPath: 'default', coursePrice: 12.5, courseVideoCount: 5, courseStatus: 1 },
            { courseId: 1, courseName: '测试1', courseCreateDate: new Date(), courseCreateUserId: 1, courseDescription: '描述', courseCoverPath: 'default', coursePrice: 12.5, courseVideoCount: 5, courseStatus: 0 }],
            selectCourseTags: ref([]),
            defaultProps: {
                children: 'tagList',
                value: 'courseTagId',
                label: 'courseTagName',
                disabled: 'tagList!=null'
            },

            searchCourseName: ref(''),
            page: {
                pageSize: 5,
                pageCount: 5,
                currentPage: 1,
            },
            //控制页面加载
            listLoading: ref(false),
            searchButtonLoading: ref(false),
            courseTagList: [],
            createCourseLoading: ref(false),

            //控制是否显示新建课程组件
            newCourse: ref(false),
            //控制是否显示课程详细信息
            courseDetail: ref(false),
            //课程详细信息id
            courseDetailId: ref(-1),
            //课程状态
            courseStatus: ref(1),
            courseStatusLoading: ref(false),
        }
    },
    created() {
        //从数据库获取分页后的课程信息
        this.searchCourse();
        //获取所有课程标签
        this.getCourseTag();

    }, 
    methods: {
      end(){
        //课程创建完成后重新获取课程信息
        this.searchCourse();
      },
        formater(date){
            return moment(date).format('yyy-MM-DD hh:mm:ss');
        },
        beforeChange() {
            return new Promise((resolve) => {
                ElMessageBox.confirm('确认修改课程状态吗').then(()=>{
                    return resolve(true)
                }).catch(()=>{
                    return resolve(false)
                })
            })
        },
        currnetChange(cpg) {
            this.page.currentPage = cpg;
            this.searchCourse();
        },
        detail(courseId) {
            this.courseDetailId = courseId;
            this.courseDetail = true;
        },
        detailHandleClose() {
            this.courseDetail = false;
        },
      deleteCourse(courseId) {
          //检查课程id是否为空
        if (null == courseId || courseId < 0) {
          ElMessage.warning('课程id不能为空');
          return;
        }

        ElMessageBox.confirm('该操作会删除该课程下所有目录、视频信息，是否继续删除？').then(()=>{

        })
        },
        updateCourseStatus(status, courseId) {
            //检查课程id是否为空
            if (null == courseId) {
                ElMessage.warning('课程id不能为空')
                return;
            }
            //检查状态属性是否异常
            if (null == status || status > 1 || status < 0) {
                ElMessage.warning('课程状态异常')
                return;
            }

            let formData = new FormData();
            formData.append('courseId', courseId);
            formData.append('courseStatus', status)
            //发送请求，开始修改
            axios.put('/api/updateCourseStatusByCourseId', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then((response) => {
                if (response.data.code == 200) {
                    ElMessage.success(response.data.msg)
                    this.searchCourse();
                } else {
                    ElMessage.warning(response.data.msg)
                }
            }).catch(function (error) {
                console.log(error)
            })

        },
        searchCourse() {
            //设置按钮开始加载
            this.searchButtonLoading = true;
            //设置页面列表开始加载
            this.listLoading = true;
            //重新向后台发起请求获取数据
            axios.get(`/api/static/selectCourseByNameAndTagAndStatusAndPage?courseName=${this.searchCourseName}&currentPage=${this.page.currentPage}&pageSize=${this.page.pageSize}&courseStatus=${this.courseStatus}&selectCourseTags=${this.selectCourseTags}`)
                .then((response) => {
                    this.courseList = response.data.data.list;
                    this.page.pageCount = response.data.data.pages;
                }).catch(function (error) {
                    console.log(error)
                }).finally(() => {
                    //设置按钮取消加载
                    this.searchButtonLoading = false;
                    //设置页面列表开始加载
                    this.listLoading = false;
                })
        },
        getCourseTag() {
            this.createCourseLoading = true;
            //从数据库获取课程标签
            axios.get('/api/static/selectAllCourseTag').then((response) => {
                if (response.data.code == 200) {
                    this.courseTagList = response.data.data;
                } else {
                    ElMessage.warning(
                        `课程标签获取失败`
                    )
                }

            }).catch(function (error) {
                console.log(error);
            }).finally(() => {
                this.createCourseLoading = false;
            })
        }
    },
}
</script>

<style>
</style>